<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
        border-collapse: collapse;
        width: 1000px;
      }
      td,
      th {
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #000000;
      }
    </style>
</head>
<body>

    <div id="div1">
        <label>用户名:</label> <input type="text" name="user" /><br />
        <label>年&emsp;龄:</label> <input type="text" name="age" /><br />
        <label>性&emsp;别:</label>
        <input type="radio" name="sex" value="男" checked /><label>男</label>
        <input type="radio" name="sex" value="女" /><label>女</label><br />
        <label>电&emsp;话:</label> <input type="tel" name="tel" /><br />
        <button>提交</button>
      </div>
  
      <table>
        <tr>
          <th><input type="checkbox" id="all" />全选</th>
          <th>用户名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>电话</th>
          <th>删除</th>
        </tr>
      </table>
   
   <script>

        var list=[];
      var table, inputs, bn,head,all;   //定义变量
        init();
      function init() {
        table = document.querySelector("table");    //获取table
        all=document.querySelector("#all");        //获取全选
        inputs = Array.from(document.querySelector("#div1").querySelectorAll("input"));      //获取所有的input，需要限制在div1里，不然全选里没有name属性，造成打印空字符串
        head=table.firstElementChild;  //head是table内的第一个tr
        bn = document.querySelector("button");       //获取button 
        bn.addEventListener("click", clickhandler);     //添加button点击事件，触发后就会执行clickhandler函数
        all.addEventListener("click",checkhandler);     //添加all点击事件
      }

      function clickhandler(e) {            //当点击时就出现一个对象
        var obj = inputs.reduce(function (value, item) {    
            if (item.name === "sex" && item.checked)   //由于男和女的item一样，需要  进行判断   
              value[item.name] = item.value;        //item就是input name就是input的名字
            else if (item.name !== "sex") value[item.name] = item.value;
           if(item.name!=="sex") //判断name等于sex时，不清空
            item.value="";      //提交完数据后需要把填写的数据清空
            return value;       
          },{ checked: false }); //添加一个checked属性
        obj.delete = false;     //添加一个delete属性
          list.push(obj);    //添加到数组里，每次根据数组重新生成表格，数据驱动显示   
          renderTable();
      }

      function renderTable(){
          table.innerHTML=""; //把table里清空
          table.appendChild(head);  //把拿到的head添加到table里
          all.checked=list.every(function(item){   //进行判断当全选选中时，添加元素后，会取消全选
                 return item.checked;
             })
          for(var i=0;i<list.length;i++){
            createTr(list[i]);  //通过for循环，不断的把list的第i项插入到表格里
          }
      }

      function createTr(data) {      //创建表格
        var tr = document.createElement("tr");
        for (var prop in data) {            //prop遍历是通过属性遍历的
          var td = document.createElement("td");
          switch (prop) {
            case "checked":     //如果prop等于checked
                var ck=document.createElement("input");  //创建一个input，多选按钮
                ck.type="checkbox";
                ck.checked=data.checked;    //input里checked就是date里checked的属性
                ck.data=data;                   //给ck增加属性，生成这一行的对象数据
                td.appendChild(ck);
                ck.addEventListener("click",checkhandler)
              break;
            case "delete":
                var del=document.createElement("button");  // 创建一个button按钮
                del.textContent="删除"; //在按钮内写内容
                del.data=data;      //给date增加属性，生成这一行的对象数据
                td.appendChild(del);   //将del放在td里
                del.addEventListener("click",delhandler);//添加删除点击事件
              break;
            default:
              td.textContent = data[prop];  
          }

          tr.appendChild(td);  //将td放入tr中
        }
        table.appendChild(tr);  //将tr放入table中
      }

      function checkhandler(e){  //点击all时进入函数
          if(this===all){       //如果点击了all
              list.forEach(function(item){
                  item.checked=all.checked;    //将全选按钮和其他按钮状态设置为相同
              })
              renderTable(); //对界面重新生成渲染
          }else{
            this.data.checked=this.checked;  //this就是ck  ，ck多选框的date属性和数据对象的引用是一个
             all.checked=list.every(function(item){
                 return item.checked;
             })
          }
  
      }

      function delhandler(e){   //删除事件
          var data=this.data;
         list=list.filter(function(item){
            return item!==data;  //返回item不等于date，就会把这条过滤掉，过滤后就是空数组
         });
         renderTable();//重新渲染
      }





   
 </script>
</body>
</html>